import { defineStore } from "pinia";

export const useTodos = defineStore("todos", {
	state: () => ({
		/**
		 * @type {Array<{id: number, text: string, done: boolean}>}
		 */
		todos: [],
		
		/**
		 * @type {'all' | 'finished' | 'unfinished'}
		 */
		filter : 'all',
		
		/**
		 * @type {number}
		 */
		nextId: 0,
	}),
	getters: {
		// 箭头函数会继承定义时所在上下文的 this，而不是运行时调用它的对象。
		// 在 Pinia 的 getters 中，只有普通函数（非箭头函数）中的 this 才会被 Pinia 自动绑定为 store 实例。
		
		/**
		 * 过滤选中的状态
		 * @param state
		 * @returns {array}
		 */
		finishedTodos :  (state) => {
			return state.todos.filter(item => item.done);
			// return this.todos.filter((item) => item.done);
			// 上面的写法是错误的，因为 this 指向的是 getters，而不是 store
		},
		
		/**
		 * 过滤未选中的状态
		 * @param state
		 * @returns {array}
		 */
		unfinishedTodos : (state) =>  {
			return state.todos.filter((item) => !item.done)
		},
		/**
		 * 获取返回的数组
		 * @returns {{id: number, text: string, done: boolean}[]}
		 */
		filterTodos () {
			const filters = {
				finished: this.finishedTodos,
				unfinished: this.unfinishedTodos
			};
			return filters[this.filter] ?? this.todos;
		}
	},
	actions: {
		addTodo(text) {
			this.todos.push({
				id: this.nextId++,
				text,
				done: false
			})
		}
	}
});